import React, {Component} from 'react';
import {
    StyleSheet, 
    View,
    FlatList,
    Text,
    Image,
} from 'react-native';
import DashLine from './DashLine';
import { getPixel, getScreenWidth, getScreenHeight } from '../common/common';

export default class InventorySurplus extends Component {

    constructor(props){
        super(props);
    }


    renderItem(item){
        return (
            <View key={item.assetId_} style={{ paddingLeft: getPixel(15), paddingRight: getPixel(15), paddingBottom: getPixel(0), paddingTop: getPixel(10), backgroundColor:'#FFF',marginBottom:getPixel(10) }}>
                    <View style={styles.cardTitle}>
                        <View style={styles.assetTag}>
                            {/* <Text style={{ fontSize: getPixel(16), color:'#333' }}>
                                {item.assetName}
                            </Text> */}
                            <Text style={{ fontSize: getPixel(14), color:'#999' }}>
                                {item.rfidNo}
                            </Text>
                        </View>
                        <View style={styles.assetState}>
                            <Text style={styles.inventoryed}>盘盈</Text>
                        </View>  
                    </View>
                   {/* <View style={styles.cardInfo}>
                        <View style={styles.assetInfo}>
                            <View style={styles.assetInfoBasic}>
                                <Text style={{ fontSize: getPixel(14), color:'#999' }}>
                                    SN: {item.serialNo}
                                </Text>
                            </View>
                            <DashLine backgroundColor='#EEE' len={35} width={240} marginTop={getPixel(10)}  marginBottom={getPixel(10)} />
                            <View style={styles.assetInfoOther}>
                            <View style={styles.assetInfoOtherText}>
                                    <Text style={{ fontSize: getPixel(14), color:'#999',width: getPixel(135) }}>
                                        位置：{item.roomName}
                                    </Text>
                                    {item.startU&&item.endU&&item.startU!=0&&item.endU!=0 ?<Text style={{ fontSize: getPixel(14), color:'#999' }}>
                                        U位：{item.startU} - {item.endU}
                                    </Text>:null}
                                </View>
                                <View style={styles.assetInfoOtherText}>
                                    <Text style={{ fontSize: getPixel(14), color:'#999',width: getPixel(135) }}>
                                        型号：{item.modelName}
                                    </Text>
                                    {item.rackName?<Text style={{ fontSize: getPixel(14), color:'#999' }}>
                                        机柜：{item.rackName}
                                    </Text>:null}
                                </View>
                                <View style={styles.assetInfoOtherText}>
                                    <Text style={{ fontSize: getPixel(14), color:'#999' }}>
                                        类型：{item.typeName}
                                    </Text>
                                </View>
                            </View>
                        </View>
                        <View style={styles.assetImg}>
                            <Image source={ item.imgPath? { uri: item.imgPath } : require('../images/noimg.png') } style={ styles.img } />
                        </View>
                    </View> */}
            </View>
        )
    }

    render() {
        return (
            // <View>
               <FlatList
                    style={{ backgroundColor: '#F5F5F5',marginTop: getPixel(10) }}
                    data={this.props.detailList}
                    renderItem={({item}) => this.renderItem(item)}
                    keyExtractor={(item, index) => index.toString()}
                >
                </FlatList>
            // </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        height: getPixel(50),
        elevation: 4,
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.5,
        shadowRadius: 10,
        shadowColor: '#DDD',
        backgroundColor: '#FFF',
        flexDirection: 'row',
    },
    title: {
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomColor: '#EEE',
        borderBottomWidth: getPixel(1),
        paddingBottom: getPixel(10),
    },
    titleText: {
        fontSize: getPixel(16),
        color: '#333',
        width: getScreenWidth() - getPixel(115),
    },
    stateStart: {
        fontSize: getPixel(14),
        padding: getPixel(4),
        backgroundColor: '#FFAA2E',
        color: '#FFF',
        borderRadius: getPixel(5),
        paddingLeft: getPixel(28),
        paddingRight: getPixel(28),
        width: getPixel(180),
        height: getPixel(30),
    },
    stateFinish: {
        fontSize: getPixel(14),
        padding: getPixel(4),
        backgroundColor: '#4A69DD',
        color: '#FFF',
        borderRadius: getPixel(5),
    },
    inventoryed: {
        fontSize: getPixel(14),
        padding: getPixel(4),
        backgroundColor: '#FFAA2E',
        color: '#FFF',
        borderRadius: getPixel(5),
        paddingLeft: getPixel(8),
        paddingRight: getPixel(8),
    },
    uninventory: {
        fontSize: getPixel(14),
        padding: getPixel(4),
        backgroundColor: '#4A69DD',
        color: '#FFF',
        borderRadius: getPixel(5),
        paddingLeft: getPixel(8),
        paddingRight: getPixel(8),
    },
    info: {
        justifyContent: 'center',
        marginTop: getPixel(10),
        backgroundColor: '#FFF',
        paddingBottom: getPixel(10),
        paddingTop: getPixel(10),
    },
    infoText: {
        flexDirection: 'row',
        alignItems: 'center',
        height: getPixel(30),
        marginLeft: getPixel(15),
    },
    infoTextTable: {
        fontSize: getPixel(14), 
        color:'#999',
        width: getScreenWidth() / 2,
    },
    detail:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    detailBox: {
        width: getScreenWidth() / 4 - getPixel(10),
        height: getScreenWidth() / 4 - getPixel(10),
        backgroundColor: '#FAFAFA',
        marginRight: getPixel(1),
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: getPixel(4),
    },  
    detailName: {
        color: '#999',
        paddingTop: getPixel(10),
        fontSize: getPixel(14),
    },
    detailNum: {
        color: '#000',
        fontSize: getPixel(16),
    },
    buttonGroup: {
        flexDirection: 'row',
        paddingLeft: getPixel(15),
        paddingRight: getPixel(15),
        height: getPixel(60), 
        backgroundColor: '#FFF',
        width: getScreenWidth(),
        alignItems: 'center',
        elevation: 4,
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.5,
        shadowRadius: 10,
        shadowColor: '#DDD',
        backgroundColor: '#FFF',
    },
    buttonSearch: {
        backgroundColor: '#6484FA', 
        height: getPixel(40), 
        borderRadius: getPixel(10),
        width: (getScreenWidth() - 30),
    },
    buttonSave: {
        backgroundColor: '#4a69dd', 
        height: getPixel(40), 
        borderTopRightRadius: getPixel(10),
        borderBottomRightRadius: getPixel(10),
        width: (getScreenWidth() - 30) / 2,
    },
    cardTitle: {
        flexDirection: 'row',
        borderBottomColor: '#EEEEEE',
        borderBottomWidth: getPixel(1),
    },
    cardInfo: {
        flexDirection: 'row',
        marginTop: getPixel(10),
    },
    assetTag: {
        width: getScreenWidth() - getPixel(110),
        height: getPixel(60),
        justifyContent: 'center',
    },
    assetInfo: {
        // width: getScreenWidth() - getPixel(130),
        // height: getPixel(130),
        // justifyContent: 'center',
    },
    assetImg: {
        width: getPixel(100),
        height: getPixel(130),
        justifyContent: 'center',
        alignItems: 'flex-end',
    },
    assetInfoBasic: {
        justifyContent: 'center',
    },
    assetInfoOther: {
        justifyContent: 'center',
    },
    assetInfoOtherText: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    assetInfoBasicOwner: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    assetInfoBasicDept: {
        fontSize: getPixel(12), 
        color:'#FFAA2E', 
        backgroundColor:'#FFF9EF',
        borderColor: '#FFAA2E',
        borderWidth: 1,
        padding: getPixel(2),
        paddingLeft: getPixel(4),
        marginLeft: getPixel(5),
        height: getPixel(20),
    },
    img: {
        resizeMode: 'contain', 
        width: getPixel(100), 
        height: getPixel(100),
    },
    assetState: {
        width: getPixel(80),
        height: getPixel(60),
        justifyContent: 'center',
        alignItems: 'flex-end',
    },
    assetStateText: {
        fontSize: getPixel(14), 
        width: getPixel(60),
        height: getPixel(30),
        borderColor: '#58CEB6',
        borderWidth: 1,
        textAlign: 'center',
        lineHeight: getPixel(30),
        color: '#58CEB6',
        backgroundColor: '#EEFFFC',
        borderRadius: 10,
    },
    
});